<template>
  <div>
    <div style="margin-top: 60px;">
      <el-carousel :interval="3000" id="carousel" type="card" height="120px">
        <el-carousel-item v-for="item in banner" :key="item.index">
          <img id="image" :src="item.imageUrl">
        </el-carousel-item>
      </el-carousel>
    </div>
    <div>
      <h3>推荐新歌</h3>
      <div>
        <m-song-table :data="songData" :height="450"></m-song-table>
      </div>
    </div>
    <div>
      <h3>最新MV</h3>
      <div style="overflow-y:scroll;height:550px;white-space:nowrap;width: 100%">
        <m-mv-list :MvData="personalizedMv"></m-mv-list>
      </div>
      <div id="11" style="margin-top: 50px;">

      </div>
    </div>
  </div>
</template>

<script>
  import bannerApi from "@/musicApi/apis/banner";
  import musicApi from "@/musicApi/apis/songs";
  import moveApi from "@/musicApi/apis/move";
  import music from "@/until/js/music";
  import songTable from "@/components/aplayer/songTable";
  import moveList from "@/components/aplayer/moveList";

  export default {
    name: "home",
    components: {
      "m-song-table": songTable,
      "m-mv-list": moveList
    },
    data() {
      return {
        songData: [],
        banner: [],
        personalizedMv: [],
        mvUrl: ''
      }
    },
    mounted() {
      this.getHomeBanner()
      this.getHomePersonalizedNewSongs()
      this.getHomeFirstNewMv(100)
    },
    methods: {
      //获取首页轮播图图片url
      getHomeBanner() {
        bannerApi.getBanner().then(res => {
          this.banner = res.data.banners
        })
      },
      //获取推荐新歌
      getHomePersonalizedNewSongs() {
        musicApi.getPersonalizedNewSongs().then(res => {
          let result = res.data.result
          let songs = []
          for (let i = 0; i < result.length; i++) {
            let obj = {}
            obj = result[i].song
            songs.push(obj)
          }
          for (let i = 0; i < songs.length; i++) {
            let obj = {}
            if (songs[i].alias != '') {
              obj.title = songs[i].name + '（' + songs[i].alias[0] + ')'
            } else {
              obj.title = songs[i].name
            }
            obj.name = songs[i].artists[0].name
            obj.id = songs[i].id
            obj.al = songs[i].album.name
            obj.picUrl = songs[i].album.picUrl
            obj.pop = songs[i].popularity
            obj.time = music.dataFormate(songs[i].bMusic.playTime)
            obj.vip = songs[i].fee
            obj.mvId = songs[i].mvid
            if (songs[i].fee == 1) {
              obj.vip = '[VIP]'
              obj.time = '0:30'
            }
            this.songData.push(obj)
          }
          //将每日新歌存入播放列表
          this.$store.commit('SET_Song_List', JSON.stringify(this.songData));
        })
      },
      //获取推荐mv
      getHomeFirstNewMv(limit) {
        moveApi.getFirstNewMv(limit).then(res => {
          this.personalizedMv = res.data.data
        })
      },
      playVideo(mvId, artistId) {
        const mv = document.getElementById(mvId)
        mv.style.display = 'inline'
        document.getElementById(artistId).style.display = 'none'
        moveApi.getMvUrl(mvId).then(res => {
          mv.src = res.data.data.url
        })
      }
    }
  }
</script>

<style scoped>
  .el-carousel__item h3 {
    color: #E6CEAC;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }

  @media (max-width: 600px) {
    #image {
      width: 300px;
      height: 100px;
    }
  }

  @media (min-width: 600px) {
    #image {
      width: 500px;
      height: 120%;
    }

    #carousel {
      text-align: center;
    }
  }
</style>